<template>
  <div class="an-dialog">
    <el-dialog title="商品预览" v-model="dialogVisible" width="480px" :before-close="handleChange">
      <div class="an-goods-info" v-loading="loading">
        <el-carousel v-if="listImg.length>0" height="440px">
          <el-carousel-item v-for="(item,index) in listImg" :key="index">
            <el-image :src="item" fit="fill" style="width:440px; height: 440px;"></el-image>
          </el-carousel-item>
        </el-carousel>
        <div class="an-title">{{infoDate.name}}</div>
        <div class="an-stock">
          <div>库存：{{infoDate.stock}}</div>
          <div>销量：{{infoDate.sellCount}}</div>
          <div>单价：{{infoDate.price}}</div>
        </div>
        <div class="an-stock">
          <div>分类：{{typeName(infoDate.typeId)}}</div>
          <div>运费基数：{{infoDate.freightBase}}</div>
          <div>状态：{{infoDate.state==1?"上架":"下架"}}</div>
        </div>
        <div v-if="options.length>0" class="an-options">
          规格：
          <el-tag
            v-for="item in options"
            :key="item.key"
          >{{item.name}} 单价: {{item.price}}元 &nbsp;&nbsp; 库存：{{item.stock}}</el-tag>
        </div>
        <div v-html="infoDate.detail"></div>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { GoodsInfo, GoodsType } from "@/utils/interface";
@Options({
  props: {
    id: Number,
    isVisible: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:isVisible"],
})
export default class goodsInfo extends Vue {
  [x: string]: any;
  data() {
    return {
      dialogVisible: this.isVisible,
      loading: false,
      infoDate: {},
      listImg: [], // 主图列表
      options: [], // 规格
      goodsTypeList: [], // 商品分类
    };
  }

  mounted() {
    this.getData();
  }

  // 查询数据
  getData() {
    this.loading = true;
    this.API.goodsInfo(this.id).then((res: GoodsInfo) => {
      this.loading = false;
      this.infoDate = res;
      if (res.mainPic) {
        this.listImg = JSON.parse(res.mainPic);
      } else {
        this.listImg.push(res.image);
      }
      if (res.options) {
        this.options = JSON.parse(res.options);
      }
    });
    // 查询商品分类
    this.$store
      .dispatch("appModule/getGoodsType")
      .then((res: Array<GoodsType>) => {
        this.goodsTypeList = res;
      });
  }

  typeName(id: number) {
    let typeName = "";
    this.goodsTypeList.forEach((item: GoodsType) => {
      if (item.id == id) {
        typeName = item.typeName;
      }
    });
    return typeName;
  }

  handleChange() {
    this.dialogVisible = this.dialogVisible ? false : true;
    this.$emit("update:isVisible", this.dialogVisible);
  }
}
</script>

<style lang="scss" scoped>
.an-goods-info {
  overflow-y: auto;
  .an-title {
    font-size: 16px;
    font-weight: bold;
    margin: 15px 0;
  }
  .an-stock {
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    background: #f5f5f5;
  }
  .an-options {
    padding: 15px 0;
    border-bottom: 1px solid #dedede;
  }
}
</style>